<template>
  <a-space class="animate__animated animate__zoomInUp" direction="vertical" :size="16" style="display: block;">
    <a-row>
      <a-col :xs="0" :sm="0" :md="3"></a-col>
      <a-col :xs="24" :sm="24" :md="18">
        <h3 class="text-center">
          <img src="logo.svg" width="180" draggable="false"/>
        </h3>
        <div class="text-center text-gray mb-md">One Doc 在线文档</div>
      </a-col>
    </a-row>
    <a-row v-if="resourceActive">
      <a-col :xs="6" :sm="6" :md="4"></a-col>
      <a-col :xs="12" :sm="12" :md="16">
        <a-divider style="border-bottom-style: dashed;max-width: 500px;">
          <span style="white-space: nowrap;">
            <file-type-icon :file-name="store.fileName"/>
          <ellipsis :text="store.fileName" :length="20"></ellipsis>
          </span>
        </a-divider>
      </a-col>
    </a-row>
    <a-row>
      <a-col :xs="0" :sm="0" :md="3"></a-col>
      <a-col :xs="24" :sm="24" :md="18" v-if="resourceActive">
        <div class="text-center text-gray mb-md">
          <img class="cover" :class="store.coverUrl ? 'bordered' : 'borderless'" :src="store.coverUrl || defaultCover"
               draggable="false" alt="document"/>
        </div>
        <div class="text-center text-gray mb-md">文件大小：{{ store.fileSize }} MB</div>
        <div class="text-center text-gray mb-md">文件类型：{{ store.fileType }}</div>
        <div class="text-center text-gray mb-md">是否加密：否</div>
        <div v-if="loading" class="text-center mt-md mb-md font-weight-bolder">加载中，请稍候……</div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="18" v-else>
        <div class="text-center mt-lg mb-lg">
          <a-input-group compact>
            <a-input placeholder="请输入资源链接" v-model="url" style="width: 70%"/>
            <a-button type="primary" @click="requestChange">
              <icon-search class="mr-sm"/>
              在线预览
            </a-button>
          </a-input-group>
        </div>
      </a-col>
    </a-row>
    <a-row v-if="resourceActive">
      <a-col :xs="0" :sm="0" :md="3"></a-col>
      <a-col :xs="24" :sm="24" :md="18">
        <div class="text-center">
          <a-button type="primary" :loading="loading" @click="preview">
            <icon-eye class="mr-sm"/>
            预览
          </a-button>
        </div>
      </a-col>
    </a-row>
  </a-space>
  <div class="text-center width-100 mt-xl mb-md">
    <a-link :href="store.originalUrl" target="_blank">
      <icon-location class="mr-sm"/>
      下载源文件
    </a-link>
    <a-link class="ml-md" href="https://gitee.com/leinbo/one-doc" target="_blank">
      <img src="gitee-fill-round.svg" width="15" style="vertical-align: middle;">
      Gitee
    </a-link>
    <a-link class="ml-md" @click="copyLink">
      <icon-share-internal class="mr-sm"/>
      分享
    </a-link>
  </div>
</template>

<script>
import router from "../../router";
import {requestResource} from "../../api/api";
import {useGlobalStore} from "../../store";
import {ref} from "vue";

export default {
  name: "index",
  setup() {
    const store = useGlobalStore();
    const loading = ref(true);
    const resourceActive = ref(false);
    const defaultCover = "/src/assets/document.svg";
    const url = ref("");
    return {
      store,
      loading,
      resourceActive,
      defaultCover,
      url
    }
  },
  beforeRouteUpdate (to, from, next) {
    setTimeout(() => {
      this.resourceActive = !!this.$route.query.url;
      if (this.resourceActive) {
        this.request();
      }
    }, 500);
  },
  beforeRouteEnter (to, from, next) {
    setTimeout(() => {
      next(vm => {
        vm.resourceActive = !!vm.$route.query.url;
        if (vm.resourceActive) {
          vm.request();
        }
      })
    }, 500);
  },
  methods: {
    copyLink() {
      this.$copyText(window.location.href).then(e => {
        this.$message.success('已复制本页面链接至剪切板！您现在可以进行分享～')
      }, e => {
        this.$message.success('复制失败！');
      })
    },
    preview() {
      if (this.store.fileType === 'xlsx' || this.store.fileType === 'xls') {
        router.push('/online/excel');
      } else {
        router.push('/online/pdf');
      }
    },
    async request() {
      this.resourceActive = true;
      this.store.$patch({
        originalUrl: this.$route.query.url
      });
      const {data, code, msg} = await requestResource(encodeURIComponent(this.store.originalUrl));
      if(code !== 200){
        this.$message.error(msg);
        this.resourceActive = false;
        this.loading = false;
        return;
      }
      this.store.$patch(data);
      document.title = `${this.store.fileName} - One Doc`;
      if (data.status === '已完成') {
        this.loading = false;
        if (this.$route.query.redirect === '1') {
          this.preview();
        }
      } else {
        this.$message.loading({content: data.status, duration: 2000});
        setTimeout(() => {
          this.request();
        }, 2000);
      }
    },
    requestChange(){
      if(!this.url){
        this.$message.error('请输入资源链接！');
        return;
      }
      this.$route.query = {url: this.url};
      this.request();
    }
  }
}
</script>

<style lang="less" scoped>
.cover {
  width: 50%;
  max-width: 300px;
  margin-bottom: 8px;
  margin-top: 8px;

  &.bordered {
    border: 1px solid #ccc;
  }

  &.borderless {
    border: none;
  }
}

.font-weight-bolder {
  font-weight: bolder;
}
</style>
